<template>
  <div
    ref="recommendListRef"
    class="recommendListRef z-50 animate__animated animate__fadeIn absolute top-5 left-[82px] w-[85.4vw] mt-1 bg-white dark:bg-zinc-800 rounded-sm shadow-md border border-gray-200 dark:border-zinc-700"
  >
    <ul
      class="max-h-60 overflow-auto z-50 flex flex-col items-center justify-center"
    >
      <li
        @click.stop="useHeadSearchStore.userSearchActions(item.title)"
        v-for="(item, index) in useHeadSearchStore.recommendList"
        :key="index"
        class="flex items-center justify-between h-2 w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 duration-300 cursor-pointer border-b border-gray-200 dark:border-zinc-700 last:border-none"
      >
        <!-- 左侧的文本 -->
        <span class="text-sm font-medium text-gray-900 dark:text-zinc-100">
          <a :href="item.link" target="_blank">{{ item.title }}</a>
        </span>
        <!-- 右侧的图标 -->
        <My-svg-icon
          class="w-1 h-1 text-gray-500 dark:text-zinc-400"
          fillClass="dark bg-zinc-800"
          name="delete"
        ></My-svg-icon>
      </li>
    </ul>
  </div>
</template>

<script setup>
import useHeadSearch from '@/store/HeaderSearch/index.js'
import { ref } from 'vue'
const recommendListRef = ref(null)
const useHeadSearchStore = useHeadSearch()
</script>

<style lang="scss" scoped></style>
